<template>
  <div>
    <h3>{{ message }}</h3>
    <BookCommentListItem
      v-for="comment in comments"
      :item="comment"
      :key="comment.id"
    />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import BookCommentListItem from './BookCommentListItem.vue'
import { useRoute } from 'vue-router'
import { getCommit } from '@/api/api'
interface commit {
  id: number
  content: string
  commentDate: string
  username: string
  book: null
}
const route = useRoute()
const message = ref('图书评论')
let comments = reactive<commit[]>([])
let url = route.path + '/comment'
console.log(url)
const getCommits = async () => {
  const { data } = await getCommit()
  console.log(data)
  comments.push(...data)
  if (comments.length === 0) {
    message.value = '当前没有任何评论'
  }
  console.log(comments)
}
getCommits()
</script>

<style scoped></style>
